<template>
  <div class="list-container">
    <header class="title">
      <i @click="back" class="yo-ico">&#xf07d;</i>
      <router-link tag="input" :to="{ name: 'search' }" placeholder="搜索商品" type="text"/>
      <span>.&nbsp;.&nbsp;.</span>
    </header>
    <!-- 选择菜单 -->
    <div class="select-menu">
      <router-link @click.native="setHighLigth(list, index)" :to="''" v-for="(list, index) in selectMenu" :key="index" tag="a" :class="{active: cindex == index}" href="javascript:void(0)">
        {{list.menu}}
      </router-link>
      <router-link v-show="isShow" :to="''" tag="a" @click.native="changeBackgroundImage" href="javascript:void(0)"></router-link>
      <router-link v-show="!isShow" :to="''" tag="a" @click.native="changeBackgroundImage" href="javascript:void(0)"></router-link>
    </div>
    <div class="list page-loadmore-wrapper" v-if="isShowloading" ref="wrapper" :style="{ height: wrapperHeight + 'rem' }">
      <mt-loadmore :top-method="loadTop" @translate-change="translateChange" @top-status-change="handleTopChange" :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" ref="loadmore">
        <!-- 横向list页面 -->
        <div class="product-container" v-show="changeListOrBlock">
          <router-link :to="{name: 'Detail', params: { id: list.pid }}"  tag="div" v-for="(list, index) in dataList" :key="index" class="product-list">
            <div class="product-image">
              <img :src="'http://img0.wangjiu.com/' + list.image_src">
            </div>
            <div class="product-info">
              <div class="title">
                <img src="http://m.wangjiu.com/htmlResource/images/s14.png" alt="">
                <span>{{list.product_name}}</span>
              </div>
              <p class="name">{{list.english_name}}</p>
              <div class="price">
                <span>￥</span>&nbsp;<span>{{list.final_price}}</span>
              </div>
            </div>
          </router-link>
        </div>
        <!-- 块级list页面 -->
        <div class="product-blockcontainer" v-show="!changeListOrBlock">
          <router-link :to="{name: 'Detail', params: { id: list.pid }}" tag="div" v-for="(list, index) in dataList" :key="index" class="product-list">
            <div class="product-image">
              <img :src="'http://img0.wangjiu.com/' + list.image_src">
            </div>
            <div class="product-info">
              <div class="title">
                <img src="http://m.wangjiu.com/htmlResource/images/s14.png" alt="">
                <span>{{list.product_name}}</span>
              </div>
              <!-- <p class="name">{{list.english_name}}</p> -->
              <div class="price">
                <span>￥</span>&nbsp;<span>{{list.final_price}}</span>
              </div>
            </div>
          </router-link>

        </div>
        <div slot="bottom" class="mint-loadmore-bottom">
            <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
            <span v-show="bottomStatus === 'loading'">
              <mt-spinner type="snake">加载中...</mt-spinner>
            </span>
        </div>
      </mt-loadmore>
    </div>
    <div class="yo-loading yo-loading-a" v-if="!isShowloading">
      <i class="yo-ico"></i>
      <div class="text">加载中...</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Vue from 'vue'
import { Loadmore } from 'mint-ui'
Vue.component(Loadmore.name, Loadmore)
export default {
  data() {
    return {
      isShowloading: true,
      allLoaded: false,
      bottomStatus: '',
      wrapperHeight: 4.84,
      topStatus: '',
      translate: 0,
      moveTranslate: 0,
      start: 1,
      dataList: [],
      pc_id: this.$route.params.id,
      key: decodeURI(this.$route.params.key.trim()),
      selectMenu: [
        {
          "menu": "综合"
        },
        {
          "menu": "销量"
        },
        {
          "menu": "价格",
          status: 0,
        },
        {
          "menu": "评论"
        }
      ],
      cindex: 0,
      isShow: true,
      changeListOrBlock: true
    }
  },
  computed: {
    },
  methods: {
    back() {
      this.$router.go(-1)
    },
    changeBackgroundImage() {
      this.isShow = !this.isShow
      this.changeListOrBlock = !this.changeListOrBlock
    },
    setHighLigth(list, index) {
      this.cindex = index
      if (list.menu === '综合') {
        axios.get(`listprod/product/select?pagecount=20&start=1&tag_key=${this.key}&keyword=${this.key}`)
          .then((response) => {
            this.dataList = response.data.result
          })
      }
      if (list.menu === '销量') {
        axios.get(`listprod/product/select?pagecount=20&start=1&tag_key=${this.key}&keyword=${this.key}&sort=sale_count+desc`)
          .then((response) => {
            this.dataList = response.data.result
          })
      }
      if (list.menu === '价格') {
        if (list.status == 0) {
          list.status = 1
          axios.get(`listprod/product/select?pagecount=20&start=1&tag_key=${this.key}&keyword=${this.key}&sort=sale_price+asc`)
            .then((response) => {
              this.dataList = response.data.result
            })
        } else {
          list.status = 0
          axios.get(`listprod/product/select?pagecount=20&start=1&tag_key=${this.key}&keyword=${this.key}&sort=sale_price+desc`)
            .then((response) => {
              this.dataList = response.data.result
            })
        }
      }
      if (list.menu === '评论') {
        axios.get(`listprod/product/select?pagecount=20&start=1&tag_key=${this.key}&keyword=${this.key}&sort=comment_count+desc`)
          .then((response) => {
            this.dataList = response.data.result
          })
      }
    },
    loadTop(){
      axios.get(`listprod/product/select?pagecount=20&start=1&tag_key=${this.key}&keyword=${this.key}`)
        .then((response) => {
          const data = response.data.result
          this.dataList = data
          this.$refs.loadmore.onTopLoaded()
      })
    },
    handleBottomChange(status) {
      this.bottomStatus = status;
    },
    loadBottom() {
      axios.get(`listprod/product/select?pagecount=20&start=${this.start}&tag_key=${this.key}&keyword=${this.key}`)
        .then((response) => {
          const data = response.data.result
          this.dataList = this.dataList.concat(data)
          this.$refs.loadmore.onBottomLoaded()
        })
      this.start++
    },
    handleTopChange(status) {
      this.moveTranslate = 1;
      this.topStatus = status;
    },
    translateChange(translate) {
      const translateNum = +translate;
      this.translate = translateNum.toFixed(2);
      this.moveTranslate = (1 + translateNum / 70).toFixed(2);
    }
  },
  mounted() {
    axios.get(`listprod/product/select?pagecount=20&start=1&tag_key=${this.key}&keyword=${this.key}`)
      .then((response) => {
        const data = response.data.result
        this.dataList = data
    })
  }
}
</script>

<style lang="scss">
@import '../styles/yo/usage/core/reset.scss';
#app {
  .list-container {
    @include flexbox();
    @include flex-direction(column);
    width: 100%;
    background: #f5f5f5;
    header {
      width: 100%;
      height: 48px;
      @include border(0 0 1px 0);
      .yo-ico {
        display: inline-block;
        line-height: 48px;
        width: .4rem;
        height: 48px;
        font-size: .16rem;
        text-align: center;
      }
      input {
        height: 36px;
        width: 2rem;
        margin-left: .2rem;
        margin-right: .1rem;
        border-radius: 4px;
        border: 1px solid #D9D9D9;
        text-align: center;
        background: #f5f5f5;
        font-size: .14rem;
        font-weight: 600;
      }
      span {
        display: inline-block;
        line-height: 48px;
        width: .4rem;
        height: 48px;
        font-size: .2rem;
        text-align: center;
        font-weight: 600;
      }
    }
    .select-menu {
      @include border(0 0 1px 0);
      width: 100%;
      height: .36rem;
      padding: .1rem 0;
      line-height: .16rem;
      font-size: .12rem;
      padding-bottom: .04rem;
      a {
        font-size: .13rem;
        display: inline-block;
        width: .64rem;
        height: .16rem;
        color: #434343;
        text-align: center;
        &.active {
          color: #cd2524;
        }
        &:nth-last-child(2) {
          width: .49rem;
          height: .16rem;
          background: url(http://m.wangjiu.com/htmlResource/images/s09.png) 50% no-repeat;
          @include border(0 0 0 1px);
          background-size: contain;
        }
        &:nth-last-child(1) {
          width: .49rem;
          height: .16rem;
          background: url(http://m.wangjiu.com/htmlResource/images/s10.png) 50% no-repeat;
          @include border(0 0 0 1px);
          background-size: contain;
        }
      }
    }
    .list {
      height: 4.84rem;
      .mint-loadmore {
        .mint-loadmore-content {
          .product-container {
            overflow-y: scroll;
            height: 4.84rem;
            @include flex();
            width: 100%;
            margin-top: .05rem;
            .product-list {
              background: #fff;
              @include flexbox();
              width: 100%;
              height: 1rem;
              .product-image {
                width: .9rem;
                height: 100%;
                padding: .1rem 0 .1rem .1rem;
                img {
                  height: .8rem;
                  width: .8rem;
                }
              }
              .product-info {
                width: 2.3rem;
                height: .99rem;
                @include border(0 0 1px 0);
                padding-top: .1rem;
                padding-right: .1rem;
                padding-bottom: .1rem;
                font-size: .12rem;
                .title {
                  width: 2.2rem;
                  height: .2rem;
                  @include flexbox();
                  img {
                    width: .2rem;
                    height: .16rem;
                    padding-top: .04rem;
                  }
                  span {
                    height: 100%;
                    width: 1.9rem;
                    padding-left: .1rem;
                    @include ellipsis(1.9rem);
                  }
                }
                .name {
                  margin-top: .1rem;
                  width: 2.2rem;
                  height: .2rem;
                  color: #bbb;
                }
                .price {
                  margin-top: .1rem;
                  width: 2.2rem;
                  height: .2rem;
                  color:#ca0915;
                }
              }
            }
          }
          .product-blockcontainer {
            overflow-y: scroll;
            height: 4.84rem;
            @include flex();
            @include flexbox();
            @include flex-wrap(wrap);
            width: 3.2rem;
            margin-top: .05rem;
            .product-list {
              &:nth-child(2n) {
                margin-left:.03rem;
              }
              &:nth-child(2n+1) {
                margin-right:.03rem;
              }
              background: #fff;
              @include flexbox();
              @include flex-direction(column);
              width: 1.57rem;
              height: 1.96rem;
              margin-bottom: .06rem;
              .product-image {
                width: 1.57rem;
                height: 1.38rem;
                img {
                  height: 100%;
                  width: 100%;
                }
              }
              .product-info {
                width: 1.57rem;
                height: .7rem;
                padding-top: .1rem;
                padding-right: .1rem;
                padding-bottom: .1rem;
                font-size: .12rem;
                padding-left: .08rem;
                .title {
                  width: 1.57rem;
                  height: .2rem;
                  @include flexbox();
                  img {
                    width: .2rem;
                    height: .16rem;
                    padding-top: .04rem;
                  }
                  span {
                    height: 100%;
                    width: 1.9rem;
                    padding-left: .1rem;
                    @include ellipsis(1.9rem);
                  }
                }
                .name {
                  margin-top: .1rem;
                  width: 2.2rem;
                  height: .2rem;
                  color: #bbb;
                }
                .price {
                  margin-top: .1rem;
                  width: 2.2rem;
                  height: .2rem;
                  color:#ca0915;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>

<style lang="css">
.loading-background, .mint-loadmore-top span {
    -webkit-transition: .2s linear;
    transition: .2s linear
}
.mint-loadmore-top span {
    display: inline-block;
    vertical-align: middle
}

.mint-loadmore-top span.is-rotate {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.page-loadmore .mint-spinner {
    display: inline-block;
    vertical-align: middle
}

.page-loadmore-desc {
    text-align: center;
    color: #666;
    padding-bottom: 5px
}

.page-loadmore-desc:last-of-type,
.page-loadmore-listitem {
    border-bottom: 1px solid #eee
}

.page-loadmore-listitem {
    height: 50px;
    line-height: 50px;
    text-align: center
}

.page-loadmore-listitem:first-child {
    border-top: 1px solid #eee
}

.page-loadmore-wrapper {
    overflow: scroll
}

.mint-loadmore-bottom span {
    display: inline-block;
    -webkit-transition: .2s linear;
    transition: .2s linear;
    vertical-align: middle
}

.mint-loadmore-bottom span.is-rotate {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}
</style>

